<template>
	<view class="container">
		<view class="content_Bac">
			<view class="content_Bac_items">
				<view>
					<image :src="userInfo.image" style="width: 120rpx;height: 120rpx;border-radius: 50%;">
					</image>
				</view>
				<view>{{userInfo.name}}</view>
				<view>{{userInfo.mobile}}</view>
			</view>
			<view class="content_Bac_items" @tap="jump('提现')">
				<view>￥ <text style="font-size: 80rpx;">{{userInfo.amount}}</text></view>
				<view>
					<button style="width: 70%;white-space: nowrap;margin: 20rpx;">我要提现</button>
				</view>
			</view>
		</view>
		<view class="funWrapper">
			<view class="funItems" @tap="jump('我的陪玩')">
				<view>
					<image mode="widthFix" src="/static/image/xiaomei.png" style="width: 110rpx;"></image>
				</view>
				<view>我的陪玩</view>
			</view>

			<view class="funItems" @tap="jump('陪玩订单')">
				<view>
					<image mode="widthFix" src="/static/image/order.png" style="width: 110rpx;"></image>
				</view>
				<view>陪玩订单</view>
			</view>
			<view class="funItems" @tap="handleShowPage()">
				<view>
					<image mode="widthFix" src="/static/image/class.png" style="width: 110rpx;"></image>
				</view>
				<view>加入我</view>
			</view>
		</view>

		<!-- 二维码弹窗 -->
		<view class="operationBox"
			:class="[isShowJoinPage==0?'operationBoxInitDisplay':isShowJoinPage==2?'operationBoxShow':'operationBoxHide','codeWrapperStyle']">
			<text @tap="isShowJoinPage=2" class="iconfont icon-guanbi1 closeIcon"></text>
			<view>加入我</view>
			<view style="text-align: center;">
				<image :src="codeUrl" mode="widthFix" style="width: 380rpx;"></image>
			</view>
			<view style="font-size: 25rpx;"><text class="iconfont icon-tishi"></text>让陪玩扫描当前二维码即可成为您的陪玩</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				isShowJoinPage: 0, //0为初始值 1为显示 2为隐藏
				codeUrl: ""
			}
		},
		onLoad() {
			// this.getBrokerInfo(2)
			this.getUserInfo()
		},
		methods: {
			handleShowPage() {
				this.isShowJoinPage = 1;
			},
			jump(type) {
				console.log("jump")
				let url = ""
				switch (type) {
					case "我的陪玩":
						url = "/pages/myPlaytimes/myPlaytimes"
						break;
					case "陪玩订单":
						url = "/pages/myPlayerOrder/myPlayerOrder"
						break;
					case "提现":
						url = "/pages/withdrawal/withdrawal?type=2"
					default:
						break;
				}

				uni.navigateTo({
					url: url
				})
			},
			mobileFilter(val) {
				let reg = /^(.{3}).*(.{4})$/
				return val.replace(reg, '$1****$2')
			},
			// 获取个人信息
			async getUserInfo() {
				const data = await this.$http('/appapi/member/info');
				this.userInfo = data
				this.userInfo.mobile = this.mobileFilter(data.mobile)
				this.identity = data.identity
				this.codeUrl = "https://qw.lvd8.cn/appapi/play_with/qrcode?id=" + data.broker_id
				console.log(this.identity)
				console.log(this.codeUrl)
			}
		}
	}
</script>

<style scoped>
	.codeWrapperStyle {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
	}

	.closeIcon {
		position: absolute;
		right: 5%;
		top: 2%;
		font-size: 50rpx;
		color: #ffffff;
	}

	.funWrapper {
		margin: 10px;
		display: flex;
		flex-shrink: 0;
		flex-wrap: wrap;
		gap: 20px;
	}

	.content_Bac_items {
		flex: 1;
		padding: 10rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.container {
		background-color: #e7e7e7;
		min-height: 100vh;
	}

	.content_Bac {
		color: #F8F8F8;
		background-color: #000;
		height: 250px;
		border-left: 1px solid #4EFFCF;
		border-right: 1px solid #FF4E4E;
		position: relative;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
	}

	.priceCard {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 66%;
		width: 80%;
		border-radius: 20rpx;
		background-color: #D09A4C;
	}

	.funItems {
		background-color: #F8F8F8;
		display: flex;
		justify-content: space-around;
		border-radius: 20rpx;
		width: 280rpx;
		padding: 35rpx 20rpx;
		align-items: center;
		margin: 15rpx 0 0;
	}

	.funIcon {
		font-size: 50rpx;
	}


	/* 弹出框 */
	.operationBox {
		width: 500rpx;
		height: 800rpx;
		background-color: #595959;
		position: fixed;
		top: 20%;
		border-radius: 40rpx;
		padding: 10rpx;
		color: white;
		box-shadow: 0 0 15rpx #93A1A1;
	}

	.operationBoxInitDisplay {
		left: -70%
	}

	.operationBoxShow {
		animation: boxShow 0.3s linear;
		animation-fill-mode: forwards;
	}

	.operationBoxHide {
		animation: boxHide 0.3s linear;
		animation-fill-mode: forwards;
	}

	@keyframes boxShow {
		0% {
			left: 15%;
		}

		100% {
			left: -70%
		}
	}

	@keyframes boxHide {
		0% {
			left: -70%;
		}

		100% {
			left: 15%
		}
	}
</style>